<template>
	<view @click="go('search','tabIndex=1')" sticky top-0 z-100 bg-white>
		<uni-search-bar radius="5" placeholder="请输入搜索关键词" ref="searchBar" cancelButton="none" readonly />
	</view>
	<view class="page page-enterprise">
		<swiper class="swiper-wrap" circular :indicator-dots="true" :autoplay="true" v-if="swiperList.length">
			<swiper-item v-for="item in swiperList">
				<image class="image w-full" :src="item.image" mode="aspectFill" @click="goPage(item)"></image>
			</swiper-item>
		</swiper>

		<uni-notice-bar v-if="notice" :text="notice" show-icon scrollable speed="30" background-color="#fff" color="#de8c17" />

		<view class="overflow-auto" mb-5px>
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>

		<template v-if="list.length">
			<view class="card-item" v-for="item in list" :key="item.id">
				<view class="title" @click="goDetail(item.id)">
					<view class="image">
						<image v-if="item.logo" mode="aspectFill" :src="item.logo"></image>
						<view v-else class="icon icon-enterprise-logo"></view>
						<span v-if="item.member && item.member.level !== 'free'"  
							:class="`icon icon-vip absolute bottom--6 right--18 text-38 color-${item.member.level}`">
						</span>
					</view>
					<view flex-1 overflow-hidden>
						<view truncate text-base pb-4px>
							{{ item.firm_name }}
							<span v-if="item.certify && item.certify.member_type == 'boss'" c-blue-5 text-lg class="icon icon-enterprise"></span>
							<span v-if="item.certify && item.certify.member_type == 'employee'" c-blue-5 text-lg class="icon icon-personal"></span>
						</view>
						<view truncate text-xs c-gray-5 v-if="item.merito">主营：{{ item.merito }}</view>
					</view>
				</view>
				<view class="content">
					<view class="content-item pt-2" v-for="goods in item.prdoucts.splice(0,2)" :key="goods.goods_id" @click="goProduct(goods.goods_id)">
						<image class="image" mode="aspectFill" :src="goods.image_thumb"></image>
						<view truncate >{{goods.name}}</view>
						<view truncate text-xs c-gray-6>{{goods.description}}</view>
					</view>
				</view>
			</view>
		</template>

	</view>

	<tabbar index="3"></tabbar>

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'

	const globalData = getApp().globalData
	const querys = globalData.tabarQuery
	globalData.tabarQuery = null

	const current = ref(0)
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}

	const goDetail = id => {
		uni.navigateTo({
			url: `/pages/enterprise/detail?id=${id}`
		})
	}

	const goProduct = id => {
		uni.navigateTo({
			url: `/pages/product/detail?id=${id}`
		})
	}

	const goPage = ({source,link}) => {
		if(!source || !link) return
		let router = 'product'
		if(source == 'firm') {
			router = 'enterprise'
		}
		uni.navigateTo({
			url: `/pages/${router}/detail?id=${link}`
		})
	}

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loadedAll = ref(false)
	const swiperList = ref([])
	const notice = ref('')
	const list = ref([])

	let types = []
	const tabs = ref([])

	async function fn(){
		swiperList.value = await api.getAddList({type: 'firm'})
		const broadcast = await api.getBroadcast({type: 'firm'})
		notice.value = broadcast.map(i => i.content).join('  ')
		let typeRes = await api.getEnterpriseType()
		types = [ { title: '全部', id: 0 }, ...typeRes ]
		tabs.value = types.map(i => i.title)
		getList()
	}
	fn()

	async function getList() {
		if(loadedAll.value) return
		const data = await api.getEnterpriseList({
			page_size: page_size.value,
			page_no: page_no.value,
			keyword: querys?.keyword,
			type_id: types[current.value].id
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
	}


</script>

<style lang="scss">
.page-enterprise {
	.card-item {
		padding: 20upx;
		box-shadow: 0 0 4px 0 silver;
		margin-bottom: 20upx;
		.title {
			display: flex;
			align-items: center;
			.image {
				position: relative;
				width: 80upx;
				height: 80upx;
				margin-right: 24upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 80upx;
				color: $uni-color-navigator;
				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
		}
		.content {
			display: flex;
			justify-content: space-between;
		}

		.content-item {
			width: 49%;
			.image {
				width: 100%;
				height: auto;
				aspect-ratio: 3/4;
			}
		}
	}

	.swiper-wrap {
		height: auto;
		aspect-ratio: 16/9;
		.image {
			width: 100%;
			height: 100%;
			aspect-ratio: 16/9;
		}
	}

	&.page .uni-noticebar {
		margin-bottom: 0;
	}
	.segmented-control {
		height: 50px!important;
		overflow: auto!important;
	}
	.segmented-control__item {
		flex: none!important;
	}
}
</style>